<div class="row">
  <div class="col-12">
    <h2 class="mb-4">创建工单</h2>
  </div>
</div>

<div class="row">
  <div class="col-lg-9">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">工单信息</h5>
      </div>
      <div class="card-body">
        <form name="$ctrl.ticketForm" ng-submit="$ctrl.submitTicket()" novalidate>
          <!-- 基础信息 -->
          <h6 class="mb-3 text-primary">基础信息</h6>
          <div class="row">
            <div class="col-md-8 mb-3">
              <label for="title" class="form-label">工单标题 <span class="text-danger">*</span></label>
              <input type="text" id="title" name="title" class="form-control"
                     ng-model="$ctrl.ticket.title" required
                     ng-class="{ 'is-invalid': $ctrl.ticketForm.title.$invalid && $ctrl.ticketForm.title.$touched }"
                     placeholder="请输入工单标题">
              <div class="invalid-feedback" ng-show="$ctrl.ticketForm.title.$invalid && $ctrl.ticketForm.title.$touched">
                请输入工单标题
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <label for="ticket_type" class="form-label">工单类型</label>
              <select id="ticket_type" class="form-control" ng-model="$ctrl.ticket.ticket_type" ui-select2="{placeholder: '请选择工单类型', allowClear: true}">
                <option value="">请选择工单类型</option>
                <option value="incident">事件</option>
                <option value="request">请求</option>
                <option value="problem">问题</option>
                <option value="change">变更</option>
              </select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="category" class="form-label">工单类别 <span class="text-danger">*</span></label>
              <select id="category" name="category" class="form-control"
                      ng-model="$ctrl.ticket.category" required
                      ng-class="{ 'is-invalid': $ctrl.ticketForm.category.$invalid && $ctrl.ticketForm.category.$touched }"
                      ui-select2="{placeholder: '请选择类别', allowClear: true}">
                <option value="">请选择类别</option>
                <option ng-repeat="category in $ctrl.categories" value="{{ category }}">{{ category }}</option>
              </select>
              <div class="invalid-feedback" ng-show="$ctrl.ticketForm.category.$invalid && $ctrl.ticketForm.category.$touched">
                请选择工单类别
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <label for="priority" class="form-label">优先级</label>
              <select id="priority" class="form-control" ng-model="$ctrl.ticket.priority" ui-select2="{placeholder: '请选择优先级', allowClear: true}">
                <option value="">请选择优先级</option>
                <option value="low">低优先级</option>
                <option value="medium">中优先级</option>
                <option value="high">高优先级</option>
                <option value="urgent">紧急</option>
              </select>
            </div>
            <div class="col-md-3 mb-3">
              <label for="incident_level" class="form-label">事件等级</label>
              <select id="incident_level" class="form-control" ng-model="$ctrl.ticket.incident_level" ui-select2="{placeholder: '请选择事件等级', allowClear: true}">
                <option value="">请选择事件等级</option>
                <option value="low">低</option>
                <option value="medium">中</option>
                <option value="high">高</option>
                <option value="urgent">紧急</option>
              </select>
            </div>
          </div>

          <!-- 技术信息 -->
          <h6 class="mb-3 text-primary mt-4">技术信息</h6>
          <div class="row">
            <div class="col-md-4 mb-3">
              <label for="product" class="form-label">产品</label>
              <select id="product" class="form-control" ng-model="$ctrl.ticket.product" ui-select2="{placeholder: '请选择产品', allowClear: true}">
                <option value="">请选择产品</option>
                <option ng-repeat="product in $ctrl.products" value="{{ product }}">{{ product }}</option>
              </select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="sub_product" class="form-label">子产品</label>
              <select id="sub_product" class="form-control" ng-model="$ctrl.ticket.sub_product" ui-select2="{placeholder: '请选择子产品', allowClear: true}">
                <option value="">请选择子产品</option>
                <option ng-repeat="subProduct in $ctrl.subProducts" value="{{ subProduct }}">{{ subProduct }}</option>
              </select>
            </div>
            <div class="col-md-4 mb-3">
              <label for="ci_info" class="form-label">CI信息</label>
              <input type="text" id="ci_info" class="form-control" 
                     ng-model="$ctrl.ticket.ci_info"
                     placeholder="如: SERVER-01, APP-02">
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="location" class="form-label">地点</label>
              <input type="text" id="location" class="form-control" 
                     ng-model="$ctrl.ticket.location"
                     placeholder="如: 北京总部-A栋">
            </div>
            <div class="col-md-6 mb-3">
              <label for="support_staff" class="form-label">指派支持人员</label>
              <select id="support_staff" class="form-control" ng-model="$ctrl.ticket.support_staff_id" ui-select2="{placeholder: '请选择支持人员', allowClear: true}">
                <option value="">请选择支持人员</option>
                <option ng-repeat="staff in $ctrl.supportStaff" value="{{ staff.id }}">{{ staff.name }} ({{ staff.department }})</option>
              </select>
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label for="due_date" class="form-label">预期完成时间</label>
              <input type="datetime-local" id="due_date" class="form-control" ng-model="$ctrl.ticket.due_date">
            </div>
          </div>

          <div class="form-group mb-4">
            <label for="description" class="form-label">问题描述 <span class="text-danger">*</span></label>
            <textarea id="description" name="description" 
                      ng-model="$ctrl.ticket.description" required
                      ng-class="{ 'is-invalid': $ctrl.ticketForm.description.$invalid && $ctrl.ticketForm.description.$touched }"
                      kindeditor ke-options="$ctrl.descriptionEditorOptions"
                      placeholder="请详细描述问题或需求，包括：问题现象、复现步骤、影响范围、期望结果等"></textarea>
            <div class="invalid-feedback" ng-show="$ctrl.ticketForm.description.$invalid && $ctrl.ticketForm.description.$touched">
              请输入详细描述
            </div>
            <small class="form-text text-muted mt-1">
              支持富文本编辑，可以插入图片、链接、表格等内容
            </small>
          </div>

          <div class="form-group">
            <button type="submit" class="btn btn-primary me-2" ng-disabled="$ctrl.isLoading">
              <span ng-show="$ctrl.isLoading">
                <i class="fas fa-spinner fa-spin me-2"></i>创建中...
              </span>
              <span ng-hide="$ctrl.isLoading">
                <i class="fas fa-plus me-2"></i>创建工单
              </span>
            </button>
            <button type="button" class="btn btn-secondary" ng-click="$ctrl.cancel()">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <div class="col-lg-3">
    <div class="card">
      <div class="card-header">
        <h6 class="mb-0">字段说明</h6>
      </div>
      <div class="card-body">
        <ul class="list-unstyled mb-0">
          <li class="mb-2"><strong>工单类型:</strong></li>
          <li class="mb-1 small text-muted">• 事件: 服务中断</li>
          <li class="mb-1 small text-muted">• 请求: 服务申请</li>
          <li class="mb-1 small text-muted">• 问题: 根因分析</li>
          <li class="mb-3 small text-muted">• 变更: 系统变更</li>
          
          <li class="mb-2"><strong>事件等级:</strong></li>
          <li class="mb-1 small text-muted">• 低: 无业务影响</li>
          <li class="mb-1 small text-muted">• 中: 部分影响</li>
          <li class="mb-1 small text-muted">• 高: 严重影响</li>
          <li class="mb-3 small text-muted">• 紧急: 业务中断</li>
          
          <li class="mb-2"><strong>CI信息:</strong></li>
          <li class="mb-3 small text-muted">配置项标识符，如服务器、应用等</li>
        </ul>
      </div>
    </div>
  </div>
</div>